<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>css선택자</title>
		<style type="text/css">
			* { font-style: italic; font-family: Mangal; } /*전체 선택자*/
			h2 { color: gold; } /*타입 선택자*/
			hr { width: 50%; } /*타입 선택자*/
			.myclass { color: red; font-style: normal; font-size: 24px; } /*클래스 선택자*/
			#idh2 { color: navy; font-size: 32px; } 
			#idp { color: navy; font-size: 28px; } /*아이디 선택자*/
			input[type="text"] { border: 1px dashed red; }
			input[type="password"] { border: 1px dashed blue; } /*속성 선택자*/
			a:link { color: navy; text-decoration: none; }
			a:vidited { color: navy; text-decoration: none; }
			a:hover { color: orange; text-decoration: underline; }
			a:active { color: red; text-decoration: underline; } /*링크 가상클래스 선택자*/
			input:focus { background: orange; } /*텍스트 박스 클릭했을때 색변동*/
			input:checked { background: red; }
			input:enabled { background: yellow; }
			input:disabled { background: pink; } /*상태 가상클래스 선택자*/
		</style>
	</head>

	<body>
	<h1>CSS 선택자(selector)</h1>
	<h2>전체(universal) 선택자 *</h2>
	<p>모든 요소에 대해 동일한 스타일 적용</p>
	<hr />
	<h2>타입(type) 선택자</h2>
	<p>특정 요소에 대해 동일한 스타일 적용</p>
	<hr />
	<h2 class="myclass">클래스(class) 선택자</h2>
	<p class="myclass">요소 class 속성을 통해 스타일 적용</p>
	<hr />
	<h2 id="idh2">아이디(id) 선택자</h2>
	<p id="idp">요소 id 속성명을 통해 스타일 적용</p>
	<p>id 속성명은 중복될 수 없으므로 하나의 요소에만 스타일 적용</p>
	<hr />
	<h2>속성(attribute) 선택자</h2>
	<div><input type="text" /></div>
	<div><input type="password" /></div>
	<div><input type="checkbox"/>로그인 기억</div>
	<hr />
	<h2>가상클래스 선택자</h2>
	<div><input type="text" disabled="disabled"/></div>
	<div><input type="password" /></div>
	<div><input type="checkbox"checked="checked"/>로그인 기억</div>
	<div><a href="http://www.google.co.kr">구글로 이동</a></div>
	</body>	
</html>